<template>
	<view>
		<basics v-if="PageCur == 'basics'"></basics>
		<components v-if="PageCur == 'component'"></components>
		<plugin v-if="PageCur == 'plugin'"></plugin>
		<overviews v-if="PageCur == 'overviews'"></overviews>
		<localemap v-if="PageCur == 'localemap'"></localemap>
		<livestream v-if="PageCur == 'livestream'"></livestream>
		<joystick v-if="PageCur == 'joystick'"></joystick>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view class="action" @click="NavChange" data-cur="overviews">
				<view class="cuIcon-cu-image">
					<image :src="'/static/tabbar/basics' + [PageCur == 'overviews' ? '_cur' : ''] + '.png'"></image>
				</view>
				<view :class="PageCur == 'overviews' ? 'text-green' : 'text-gray'">状态</view>
			</view>
			<view class="action" @click="NavChange" data-cur="localemap">
				<view class="cuIcon-cu-image">
					<image :src="'/static/tabbar/component' + [PageCur == 'localemap' ? '_cur' : ''] + '.png'"></image>
				</view>
				<view :class="PageCur == 'localemap' ? 'text-green' : 'text-gray'">位置</view>
			</view>
			<view class="action" @click="NavChange" data-cur="livestream">
				<view class="cuIcon-cu-image">
					<image :src="'/static/tabbar/plugin' + [PageCur == 'livestream' ? '_cur' : ''] + '.png'"></image>
				</view>
				<view :class="PageCur == 'livestream' ? 'text-green' : 'text-gray'">监控</view>
			</view>
			<view class="action" @click="NavChange" data-cur="joystick">
				<view class="cuIcon-cu-image">
					<image :src="'/static/tabbar/basics' + [PageCur == 'joystick' ? '_cur' : ''] + '.png'"></image>
				</view>
				<view :class="PageCur == 'joystick' ? 'text-green' : 'text-gray'">遥控</view>
			</view>
			<!-- <view class="action" @click="NavChange" data-cur="basics">
				<view class="cuIcon-cu-image"><image :src="'/static/tabbar/basics' + [PageCur == 'basics' ? '_cur' : ''] + '.png'"></image></view>
				<view :class="PageCur == 'basics' ? 'text-green' : 'text-gray'">元素</view>
			</view>
			<view class="action" @click="NavChange" data-cur="component">
				<view class="cuIcon-cu-image"><image :src="'/static/tabbar/component' + [PageCur == 'component' ? '_cur' : ''] + '.png'"></image></view>
				<view :class="PageCur == 'component' ? 'text-green' : 'text-gray'">组件</view>
			</view>
			<view class="action" @click="NavChange" data-cur="plugin">
				<view class="cuIcon-cu-image"><image :src="'/static/tabbar/plugin' + [PageCur == 'plugin' ? '_cur' : ''] + '.png'"></image></view>
				<view :class="PageCur == 'plugin' ? 'text-green' : 'text-gray'">扩展</view>
			</view> -->
		</view>
		<wyb-modal ref="modal" title="警报" content="空气指标异常,请及时处理" cancel-text="5分钟后提醒" confirm-text="不再提醒" @cancel="onCancelClick"
		 @confirm="onConfirmClick" />
	</view>
</template>

<script>
	import wybModal from '@/components/wyb-modal/wyb-modal.vue';
	export default {
		components: {
			wybModal
		},
		mounted() {
			setInterval(() => {
				uni.request({
					url: 'http:///106.13.136.240:12333/api/sensor/selectLatestData',
					method: 'GET',
					success: res => {
						try {
							const thisData = res.data.data[0];
							if (thisData.gas === 0 || thisData.temperature > 34 || thisData.humidity > 70) {
								if (new Date().getTime() - this.nowTS > 10000) {
									uni.vibrateLong();
									this.$refs.modal.showModal();
								}
							}
						} catch (e) {
							console.log(JSON.stringify(e));
						}
					}
				});
			}, 1000);
		},
		data() {
			return {
				PageCur: 'overviews',
				nowTS: 0
			};
		},
		methods: {
			onConfirmClick() {
				this.nowTS = 9999999999999;
				this.cancelAlert();
			},
			onCancelClick() {
				this.nowTS = new Date().getTime();
				this.cancelAlert();
			},
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur;
			},
			cancelAlert() {
				this.$refs.modal.hideModal()
			}
		}
	};
</script>

<style></style>
